<template>
	<view class="jobfair-container">
		<u-navbar title="招聘会" bgColor="transparent" :titleStyle="{'color':'#000', 'fontWeight': 600}">
			<view class="flex navigeter" slot="left">
				<view class="nav-left flex">
					<u-icon name="arrow-left" size="24" @tap="back"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
					<u-icon name="home" size="24" @tap="toHome"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="jobfair-banner">
			<swiper class="swiper" circular indicator-dots autoplay :interval="3000" indicator-active-color="#FFDE6D"
				:current="banIndex">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image class="banner-img" :src="api_host + item.imageUrl" mode="heightFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="jobfair-content">
			<view class="jobfair-head">
				<text class="title">招聘会</text>
				<view :class="['filter-box', { 'moreText': index > 0 }]">
					<picker class="filter-box-wrap" :value="index" :range="jobfairList"  @change="bindPickerChange">
						<text v-if="index >= 0" class="filter-text">{{ jobfairList[index] }}</text>
						<text v-else class="filter-text">筛选</text>
						<text class="filter-icon"></text>
					</picker>
				</view>
			</view>
			<x-skeleton type="list" :loading="loading" :configs="skeletonCofig">
				<scroll-view class="list-wrap"  scroll-y="true">
					<view class="jobfair-list" v-if="careerList.length">
						<view class="jobfair-item" v-for="item in careerList" :key="item.id" 
							@tap="nologinJump(`/subpage/talentemployment/jobfair/jobfairdetail?id=${item.id}`)">
							<text :class="['jobfair-name', 's_2', statusText(item.progState).class]">{{ item.careerTitle }}</text>
							<view class="jobfair-labels">
								<text class="label">{{ item.companyNumber }}家企业</text>
								<text class="label">{{ item.stationNumber }}个岗位</text>
							</view>
							<view class="jobfair-info">
								<text class="info address">{{ item.hostAddr }}</text>
								<text class="info date">{{ item.meetTime | formatDateTime }}-{{ item.endTime | formatDateTime }}</text>
							</view>
							<text :class="['jobfair-statu', statusText(item.progState).class]">{{ statusText(item.progState).text }}</text>
						</view>
					</view>
					<view v-else class="no-data">
						<text>暂无数据</text>
					</view>
				</scroll-view>
			</x-skeleton>
		</view>
	</view>
</template>

<script>
	import {
		getBanners
	} from '@/common/api_user.js'
	import {
		careerFairList,
	} from '@/common/api_employment.js'
	export default {
		
		data() {
			return {
				index: -1,
				banIndex: 0,
				loading: true,
				hasMore: true, // 是否有更多数据
				jobfairList: ['全部', '马上开始','正在热招', '已经结束'],
				careerList: [],
				bannerList: [],
				queryParams: {
					progState: '',
					pageNum: 1,
					pageSize: 5
				},
				skeletonCofig: {
					headShow: false
				}
			}
		},
		onLoad() {
			if (!this.hasLogin) {
				this.toLogin()
				return false
			}
			this.getList() 
			this.getBanners()
		},
		onReachBottom() {
			console.log('到底了')
			if (this.hasMore) {
				this.getList()
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			toLogin() {
				uni.showModal({
					title:'提示',
					content:'请先完成登录',
					showCancel: false,
					confirmText:'去登录',
					success(res) {
						if(res.confirm){
							uni.navigateTo({
								url:'/pages/me/mobile_login'
							})
						}
					}
				})
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			bindPickerChange(e) {
				console.log(e, 'bindPickerChange')
				this.index = e.detail.value
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 999
				this.careerList = []
				this.queryParams.progState = Number(e.detail.value) - 1 >= 0 ? Number(e.detail.value) - 1 : ''
				this.getList()
			},
			async getList() {
				const postData = await careerFairList(this.queryParams)
				this.loading = false
				if (postData.data?.length) {
					this.careerList = this.careerList.concat(postData.data)
					this.queryParams.pageNum += 1
					this.loading = false
				} else {
					this.hasMore = false
					
				}
			},
			async getBanners() {
				const res = await getBanners({
					affiliation: '10'
				})
				if (res.code == 200) {
					if (res.data.length) {
						if (res.data[0].imageUrl) {
							const tempArr = res.data[0].imageUrl.split(',')
							this.bannerList = tempArr.map(item => ({
								imageLink: res.data[0].imageLink,
								imageUrl: item,
								id: res.data[0].id
							}))
						}
						
						console.log(this.bannerList, 'this.bannerList')
					}
					
				}
			},
			statusText(type) {
				switch(type) {
					case 0:
						return {
							class: 'start',
							text: '马上开始'
						}
					case 1:
						return {
							class: 'hot',
							text: '正在热招'
						}
					case 2:
						return {
							class: 'end',
							text: '已经结束'
						}
				}
			}
		}
	}
</script>

<style lang="scss">
	.jobfair-container {
		min-height: 100vh;
		background-color: #F2F5FF;
		.navigeter {
			padding: 8rpx 24rpx;
			background: rgba(255,255,255,0.6);
			border-radius: 25px;
		}
		.jobfair-banner {
			position: relative;
			width: 100%;
			height: 560rpx;
			// padding: 0 32rpx;
			// margin-bottom: 24rpx;
			box-sizing: border-box;
			.swiper {
				height: 560rpx;
				overflow: hidden;
				.banner-img {
					width: 100% !important;
					height: 560rpx;
				}
			}
			// background: url('https://hxs.dsjhs.com:553/prod-api/profile/jobfair-banner.png') no-repeat center;
			// background-size: 100% 100%;
			.banner-text {
				position: absolute;
				left: 56rpx;
				bottom: 208rpx;
				width: 218rpx;
				height: 116rpx;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/jobfair-banner-text.png') no-repeat center;
				background-size: 100% 100%;
			}
		}
		.jobfair-content {
			padding: 0 32rpx 32rpx;
			.jobfair-head {
				position: relative;
				display: flex;
				justify-content: space-between;
				z-index: 10;
				margin-top: -40rpx;
				box-sizing: border-box;
				margin-bottom: 24rpx;
				.title {
					font-weight: 600;
					font-size: 36rpx;
					color: #34314F;
					line-height: 50rpx;
					text-align: left;
				}
				.filter-box {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 14rpx;
					text-align: center;
					&.moreText {
						text-align: left;
					}
					.filter-box-wrap {
						min-width: 144rpx;
						background: #FFFFFF;
						border-radius: 40rpx;
						padding: 14rpx 16rpx;
					}
					
					.filter-text {
						font-weight: 500;
						font-size: 28rpx;
						color: #34314F;
						line-height: 28rpx;
					}
					.filter-icon {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						margin-left: 4rpx;
						width: 32rpx;
						height: 32rpx;
						box-sizing: border-box;
						background: url('https://hxs.dsjhs.com:553/prod-api/profile/down-arrow.png') no-repeat center;
						background-size: 100% 100%;
					}
					
				}
			}
			.list-wrap {
				// position: absolute;
				// width: 100%;
				// left: 0;
				// height: calc(100% - 380rpx);
				// padding: 0 32rpx;
				// overflow-y: auto;
				// box-sizing: border-box;
				// background-color: #F2F5FF;
			}
			.jobfair-list {
				.jobfair-item {
					position: relative;
					width: 100%;
					// height: 300rpx;
					padding: 28rpx 30rpx 24rpx 32rpx;
					margin-bottom: 24rpx;
					background: #FFFFFF;
					border-radius: 20px;
					box-sizing: border-box;
					.jobfair-name {
						// height: 98rpx;
						font-weight: 600;
						font-size: 32rpx;
						color: #34314F;
						line-height: 44rpx;
						text-align: left;
						margin-bottom: 20rpx;
						&.end {
							color: rgba(52, 49, 79, 0.40);
						}
					}
					.jobfair-labels {
						display: flex;
						flex-wrap: nowrap;
						margin-bottom: 24rpx;
						text {
							display: block;
							margin-right: 16rpx;
							padding: 4rpx 12rpx;
							font-size: 24rpx;
							color: rgba(52, 49, 79, 0.8);
							line-height: 32rpx;
							border-radius: 8rpx;
							background-color: #F4F4F4;
							box-sizing: border-box;
						}
					}
					.jobfair-info {
						.info {
							position: relative;
							display: block;
							font-weight: 400;
							padding-left: 36rpx;
							font-size: 26rpx;
							color: rgba(52, 49, 79, 0.7);
							line-height: 16px;
							text-align: left;
							font-style: normal;
							display: block;
							margin-bottom: 12rpx;
							box-sizing: border-box;
							
							&::before {
								position: absolute;
								top: 0;
								left: 0;
								display: block;
								width: 32rpx;
								height: 32rpx;
								content: '';
							}
							&.address::before {
								background: url('https://hxs.dsjhs.com:553/prod-api/profile/wz-icon.png') no-repeat center;
								background-size: 100% 100%;
							}
							&.date::before {
								background: url('https://hxs.dsjhs.com:553/prod-api/profile/sj-icon.png') no-repeat center;
								background-size: 100% 100%;
							}
						}
					}
					.jobfair-statu {
						position: absolute;
						bottom: 32rpx;
						right: 32rpx;
						font-weight: 400;
						font-size: 26rpx;
						ccolor: #34314F;
						line-height: 32rpx;
						text-align: center;
						&.hot {
							color: #FF7F1C !important;
						}
						&.start {
							color: #0066FD !important;
						}
						&.end {
							color: rgba(52, 49, 79, 0.40) !important;
						}
					}
				}
			}
		}
	}
	
	
	//单行
	.s_1{
	    white-space: nowrap; /* 不换行 */
	    overflow: hidden; /* 隐藏超出的内容 */
	    text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
	    max-width: 200px; /* 设置最大宽度以限制文本的显示长度 */
	}
	 
	 
	//多行
	
	.s_2 {
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
</style>